<template>
    <div class="equipment-alarm">
        <el-form 
        class="form-container" 
        label-width="80px" 
        :size="size" 
        :model="form"
        label-position="left" 
        ref="form">
        <el-row>
            <el-col :span="8">
                <el-form-item label="测站编码:" prop="code">
                    <el-input 
                        style="width: 90%"
                        v-model="form.code"
                        placeholder="请输入"
                        clearable>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="测站名称:" prop="name">
                    <el-input 
                        style="width: 90%"
                        v-model="form.name"
                        placeholder="请输入"
                        clearable>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-button :size="size" type="primary" @click="onSearch">查询</el-button>
            </el-col>
        </el-row>
    </el-form>
        <el-table
            :data="tableData"
            :header-row-style="{ background: '#f2f2f2' }"
            id="table"
            :height="tableHeight || '280px'"
            border
            style="width: 100%;"
            size="small">
            <el-table-column
                v-for="item in tableHeaderColumn"
                :prop="item.prop"
                :label="item.label"
                :width="item.width">
            </el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next, total"
            :total="1000">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'equipment-alarm',
    props: {
        tableHeight: {
            type: Number,
            default: 350
        }
    },

    created() {
        
    },

    data() {
        return {
            size: 'mini',
            form: {
                code: '',
                named: ''
            },
            tableHeaderColumn: [
                { label: '序号', prop: 'sn', width: 50 },
                { label: '行政区', prop: 'address'},
                { label: '测站编码', prop: 'code' },
                { label: '测站名称', prop: 'name'},
                { label: '记录时间', prop: 'time'},
                { label: '电压(V)', prop: 'voltage' },
                { label: '电压报警', prop: 'voltageAlarm' },
                { label: '电源工作状态', prop: 'powerWorkStatus', width: 120},
                { label: '终端箱门报警', prop: 'terminalAlarm', width: 120},
                { label: 'IC卡功能报警', prop: 'IcCardAlarm', width: 120 }
            ],
            tableData: [
                {sn: 1},
                {sn: 2},
                {sn: 3},
                {sn: 4 },
                {sn: 5},
                {sn: 6},
                {sn: 7},
                {sn: 8},
                {sn: 9},
                {sn: 10},
                {sn: 11},
                {sn: 12},
            ],
            
        };
    },

    methods: {
        onSearch() {
            
        }
    }
};
</script>

<style lang="scss" scoped>
// #6edef1
    .equipment-alarm {
        padding: 15px;
        :deep{
            .el-input__inner {
                background-color: rgba(110, 224, 241, 0);
                border: 1px solid rgba(110, 224, 241, 1);
                border-radius: 15px;
                padding-right: 10px;
                font-size: 14px;
            }

            .el-table__body {
                .el-table__cell {
                    padding: 5px 0;
                }
            }

            .el-table--border::after, .el-table--group::after, .el-table::before {
                background-color: rgba(110, 224, 241, 0.4);
            }

            .el-table thead tr th {
                background: #efefef;
                color: #333;
                font-size: 14px;
            }

            .el-table thead{
                color: rgba(0, 0, 0, 0.65);
                font-size: 12px;     
            }

            
            .el-table--border th.el-table__cell.gutter:last-of-type {
                border: none;
            }

            .el-button--mini {
                padding: 6px 10px;
            }

            .el-form-item__label {
                color: #333;
            }

        }
        .el-pagination {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            :deep {
                button {
                    background: rgba(0, 0, 0, 0);
                }
                .btn-prev, .btn-next {
                    background: rgba(0, 0, 0, 0);
                    color: #02A7F0;
                }
                .el-pager li {
                    background: rgba(0, 0, 0, 0);
                    color: #333;
                    font-size: 12px;
                }
                .el-pager li.active {
                    color: #1890ff;
                }
                .el-pager li:hover {
                    color: #1890ff;
                }

                button:disabled {
                    color: #c0c4cc;
                }
                
            }
        }
    }

    
    
</style>